<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>人员轨迹</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="${ctxPath}/component/pear/css/pear.css"/>
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .div-zy{background-color: #ffffff;padding: 5px 10px;position: relative}
        .title11{color: #039091!important;}
        .layui-tab{margin: 0;}
        hr{margin: 7px 0px;}
        .box .layui-tab-brief>.layui-tab-title .layui-this{color: #FFFFFF!important;}
        .box .layui-tab-brief>.layui-tab-more li.layui-this:after,.box .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 3px solid #FFFFFF!important;}
        .box .zy-select-this {background-color: #D1E9E9!important;}
        .layui-layer-content{
            overflow: hidden!important;
        }
        .title11{ white-space: nowrap;text-overflow: ellipsis;width: 18rem;overflow: hidden;font-size: 15px;font-weight: bold;}
        #page{ position: fixed;left: 50%;transform: translateX(-50%);width: 100%;bottom: -5px;text-align: center}
        #page2{ position: fixed;left: 50%;transform: translateX(-50%);width: 100%;bottom: -5px;text-align: center}
        #div-wz{}
        .layui-box a{background-color: transparent;}
        input::-webkit-input-placeholder{color: #039091;}
        .map-right-box .layui-form-content{padding: 0px 10px;}
        .layui-content-box {background-color: #D1E9E9;padding: 5px;}
        .layui-content-box .layui-right-container{padding: 5px 10px;}
        .layui-content-box .layui-right-container p{font-size: 14px;color: #404747;}
        .layui-content-box .layui-right-container .info-desc{
            font-size: 14px;
            color: #404747;
            padding-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 310px;
        }
        .layui-content-box .layui-right-container .layui-top-content{display: flex;justify-content: space-between;}
        .layui-content-box .layui-right-container .layui-top-content .img-box{display: flex;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box{display: flex;flex-direction: column;justify-content: space-around;}
        .layui-content-box .layui-right-container .layui-top-content .img-box  img{width: 50px;height: 50px;border: 2px solid #0FF0FF;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box {padding-left: 5px;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box .info-title{font-size: 14px;color: #039091;font-weight: bold;}
        .layui-content-box .layui-right-container .layui-top-content .img-box .info-box .info-time{color: #1F2323}
        .layui-content-box .layui-right-container .layui-top-content .examine span{color: #fff;cursor: pointer;border: 1px solid #FAA307;border-radius: 3px;padding: 3px 5px;transition: 0.3s ease-out;background-color: #FAA307;}
        .layui-content-box .layui-right-container .layui-top-content .examine span:hover{color: #fff;border: 1px solid #FF5722;background-color: #FF5722; transition: 0.3s ease-out}
        .map-left-box{height: 95%;width: 360px;background-color: rgba(2,134,144,0.8);position: fixed;z-index: 99999 !important;top: 50%;transform: translateY(-50%);left: 10px;border-radius: 10px;}
        .map-right-box{height: 95%;width: 360px;background-color: rgba(2,134,144,0.8); position: fixed;z-index: 99999 !important;top: 50%;transform: translateY(-50%);right: 10px;border-radius: 10px;}
    </style>

</head>
<body>
<div id="container">

</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="//api.map.baidu.com/api?type=web&v=2.0&ak=UP9aRFsRMlAGV744QkpSoChSY0KeIzb8"></script>
<script src="/resource/track/LuShu_min.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dictionary','element', 'laydate', 'laypage'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let laypage = layui.laypage;
        let element = layui.element
        let SYS_PATH = "${ctxPath}/";

        var map = new BMap.Map('container'); // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.951522,38.936218), 17);
        map.enableScrollWheelZoom(true);

        var path = [{
            'lng': 115.951522,
            'lat': 38.936218
        }, {
            'lng': 115.952326,
            'lat': 38.936117
        }, {
            'lng': 115.95477,
            'lat': 38.93578
        }, {
            'lng': 115.956782,
            'lat': 38.935555
        }, {
            'lng': 115.957465,
            'lat': 38.937155
        }, {
            'lng': 115.958255,
            'lat': 38.939077
        }, {
            'lng': 115.954662,
            'lat': 38.939765
        }];
        var point = [];
        for (var i = 0; i < path.length; i++) {
            point.push(new BMap.Point(path[i].lng, path[i].lat));
        }
        // var pl = new BMap.Polyline(point);

        var lushu;
        lushu = new BMapLib.LuShu(map,point,{
            defaultContent:"",
            autoView: false,
            icon: new BMap.Icon('/resource/track/person.png', new BMap.Size(26,27),{anchor : new BMap.Size(13, 26)}),
            speed: 100,
            enableRotation:false,//是否设置marker随着道路的走向进行旋转
            landmarkPois:[]
        });
        lushu.start();
    });
</script>
</body>
</html>
